<template>
  <div id="sidebar">
    <h3>{{ $t('menu.order') }}</h3>
    <a-menu
      style="width: 200px"
      :mode="mode"
      :theme="theme"
      :defaultSelectedKeys="[orderListMenu]"
    >
      <a-menu-item key="1" @click="selOrderList('1')" style="padding-left:48px;">
        <a-icon :component="iconLiveS" class="font12" v-show="sideStatus === 's'"/>
        <a-icon :component="iconLiveN" class="font12" v-show="sideStatus === 'n'"/>
        {{ $t('public.checkInToday') }}
      </a-menu-item>
      <a-menu-item key="2" @click="selOrderList('2')" style="padding-left:48px;">
        <a-icon :component="iconOutS" class="font12" v-show="sideStatus2 === 's'"/>
        <a-icon :component="iconOutN" class="font12" v-show="sideStatus2 === 'n'"/>
        {{ $t('public.checkOutToday') }}
      </a-menu-item>
      <a-menu-item key="0" @click="selOrderList('0')" style="padding-left:48px;">
        <a-icon :component="iconPaperN" class="font12" v-show="sideStatus3 === 'n'"/>
        <a-icon :component="iconPaperS" class="font12" v-show="sideStatus3 === 's'"/>
        {{ $t('public.allOrders') }}
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { iconLiveS, iconLiveN, iconOutN, iconOutS, iconPaperN, iconPaperS } from '@/core/icons'
import { FULL_ORDER_STATUS, READY_ENTRY_ORDER_STATUS, READY_LEAVE_ORDER_STATUS } from '@/config/enum'
import moment from 'moment'
export default {
  name: 'OrderSide',
  data () {
    return {
      mode: 'inline',
      theme: 'light',
      iconLiveS,
      iconLiveN,
      iconOutS,
      iconOutN,
      iconPaperN,
      iconPaperS
    }
  },
  computed: {
    ...mapGetters([
      'orderListMenu',
      'orderParams'
    ]),
    sideStatus () {
      const sideStatus = this.orderListMenu
      let res = ''
      switch (sideStatus) {
        case '1':
          res = 's'
          break
        case '2':
          res = 'n'
          break
        case '0':
          res = 'n'
          break
      }
      return res
    },
    sideStatus2 () {
      const sideStatus = this.orderListMenu
      let res = ''
      switch (sideStatus) {
        case '1':
          res = 'n'
          break
        case '2':
          res = 's'
          break
        case '0':
          res = 'n'
          break
      }
      return res
    },
    sideStatus3 () {
      const sideStatus = this.orderListMenu
      let res = ''
      switch (sideStatus) {
        case '1':
          res = 'n'
          break
        case '2':
          res = 'n'
          break
        case '0':
          res = 's'
          break
      }
      return res
    }
  },
  methods: {
    ...mapMutations([
      'setorderListMenu',
      'setOrderParams'
    ]),
    ...mapActions([
      'getorderListMenuMsg'
    ]),
    /* 菜单状态，参数过滤
    *@val 1 是今日入住 1
    *     2 是今日离店 2
    *     3 全部订单  0 */
    selOrderList (val) {
      if (val !== this.orderListMenu) {
        this.setorderListMenu(val)
        const params = {}
        params.gjc = ''
        params.page = 1
        params.pagesize = 10
        if (val === '1') {
          const ksrq = moment().format('YYYY-MM-DD')
          params.ddzt = READY_ENTRY_ORDER_STATUS
          params.ksrq = ksrq
          params.jsrq = ''
        } else if (val === '2') {
          const jsrq = moment().format('YYYY-MM-DD')
          params.ddzt = READY_LEAVE_ORDER_STATUS
          params.jsrq = jsrq
          params.ksrq = ''
        } else if (val === '0') {
          params.ddzt = FULL_ORDER_STATUS
          params.jsrq = ''
          params.ksrq = ''
        }
        this.setOrderParams(params)
        this.getorderListMenuMsg(this.orderParams).then(res => { }).catch(() => {})
      }
    }
  }
}
</script>
<style lang="less" scoped>
#sidebar{
  width:200px;
  background-color: #fff;
  position: absolute;
  top:64px;
  left:0;
  bottom:0;
  z-index: 2;
  h3{
    font-size: 16px;
    padding-left:27px;
    padding-top:12px;
  }
}
</style>
